﻿
@{
    ViewData["Title"] = "Index";
}
<style>
    [v-cloak] {
        display: none;
    }
</style>

<h2>菜单列表</h2>


<div id="app">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="searchName" id="searchName" placeholder="搜索" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:auto">
                    <button class="layui-btn layui-btn-normal layui-icon" type="button" v-on:click="GetDataList(1)">&#xe615;</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline" style="width:auto">
                    <button class="layui-btn" type="button" v-on:click="AddorEdit"><i class="layui-icon">&#xe654;</i> 添加菜单</button>
                </div>
            </div>
        </div>
    </div>
<form class="layui-form" action="" v-cloak>
    <div class="layui-form-item">
        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col>
                <col width="280">
            </colgroup>
            <thead>
                <tr>
                    <th>id</th>
                    <th>controller名</th>
                    <th>actionName名</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-for="item in dataList">

                <tr>
                    <td>
                        <p>{{item.id}}</p>
                    </td>
                    <td>
                        {{item.controllerName}}
                    </td>
                    <td>
                        <p>{{item.actionName}}</p>
                    </td>
                    <td>
                        <a class="layui-btn layui-btn-xs" v-on:click="AddorEdit">编辑</a>
                    </td>
                </tr>
            </tbody>
            <tbody v-show="!isShow">
                <tr>
                    <td colspan="6">暂无数据</td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

<div id="page" style="text-align: center;"></div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            dataList: [],
            isShow: false
        },
        methods: {
            GetDataList: function () { 


            },
            AddorEdit: function () {
                console.log("添加或编辑");
                location.href = '@Url.Action("add","menu")';

            }

        },
        watch:{
            controller :function(newVal, oldVal) {
                vm.viewPermission = vm.controller + "|" + vm.actionName;

            },
            actionName: function (newVal, oldVal) {
                vm.viewPermission = vm.controller + "|" + vm.actionName;

            }
        },
        computed: {

        },
        mounted: function (){
            axios.post('@Url.Action("MenuList", "menu")',{CurrentPage: '1', PageSize: '10' })
                .then(function (response) {
                    if (response.data.resultCode == 0) {
                        console.log(response);
                        vm.dataList = response.data.data.data;
                        console.log(vm.dataList);
                        if (vm.dataList.length > 0) {
                            vm.isShow = true;

                        }
                    }

                })
                .catch(function (error) {
                    console.log(error);
                });

        }

    });

</script>
